<!DOCTYPE html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script>
      run(async function () {
        const paragraphs = [
          'Aliqua non sint est tempor nisi voluptate amet ipsum. Mollit do velit do eu laboris proident minim dolore non est excepteur. Enim reprehenderit aliqua nostrud adipisicing veniam consequat sit veniam id. Nisi dolore laboris dolore duis Lorem officia proident nostrud. Esse dolor nisi ad nisi est sit magna minim duis laborum.',
          'Ex eu consectetur ut Lorem ipsum velit. Do aute aliquip esse ea. Ea voluptate velit est reprehenderit ullamco voluptate quis nisi nisi dolor. Velit do exercitation cillum proident minim. Exercitation sint cillum aliquip in. Excepteur elit veniam consectetur ea ad incididunt.',
          'Nisi ipsum in enim et. Reprehenderit dolore proident ad id. Lorem elit incididunt aliquip sit elit pariatur sit ea aliquip officia deserunt enim incididunt. Occaecat consectetur ullamco adipisicing pariatur. Consectetur id cupidatat nulla deserunt eiusmod commodo laborum laboris laborum.',
          'Anim fugiat quis consectetur do. Do ipsum qui commodo commodo officia. Ex qui pariatur reprehenderit aliqua consequat eu veniam laborum est mollit fugiat. Esse nisi consectetur laborum tempor cillum officia officia qui labore ipsum adipisicing.',
          'Dolor ea labore aute culpa veniam voluptate fugiat commodo sint do aliqua aute ea. In aute commodo ex labore sint quis. Et aliquip laboris excepteur quis aliqua sit do labore eiusmod.',
          'Exercitation amet excepteur quis ipsum officia. Occaecat dolor velit reprehenderit ullamco cillum nostrud culpa qui. Reprehenderit id cupidatat nostrud occaecat. Tempor ea exercitation aliqua non consequat officia cillum sunt.'
        ];

        const directLine = testHelpers.createDirectLineWithTranscript(paragraphs.splice(0, 5));
        const store = testHelpers.createStore();

        function render(options) {
          return WebChat.renderWebChat(
            {
              ...options,
              directLine,
              store
            },
            document.getElementById('webchat')
          );
        }

        render({ styleOptions: { scrollToEndButtonBehavior: 'any' } });

        await pageConditions.uiConnected();

        await pageConditions.minNumActivitiesShown(5);
        await pageConditions.scrollToBottomCompleted();

        // EXPECT: We are at the bottom, hide the button.
        await pageConditions.scrollToEndButtonHidden();

        await pageObjects.scrollToTop();

        // EXPECT: With "any" behavior, we are at the top, show the button.
        await pageConditions.scrollToEndButtonShown();

        // EXPECT: With "any" behavior, the button should say "More messages".
        await pageConditions.became(
          'Show "More messages"',
          () => pageElements.scrollToEndButton().textContent === 'More messages',
          1000
        );

        await pageObjects.scrollToBottom();

        // EXPECT: We are at the bottom, hide the button.
        await pageConditions.scrollToEndButtonHidden();

        await pageObjects.scrollToTop();

        // EXPECT: With "any" behavior, we are at the top, show the button.
        await pageConditions.scrollToEndButtonShown();

        render();

        // EXPECT: With "unread" (default) behavior, we are at the top, everything is read, hide the button.
        await pageConditions.scrollToEndButtonHidden();

        directLine.activityDeferredObservable.next(paragraphs.shift());
        await pageConditions.minNumActivitiesShown(6);

        // EXPECT: With "unread" behavior, we are at the top, 1 activity is unread, show the button.
        await pageConditions.scrollToEndButtonShown();

        // EXPECT: With "unread" behavior', the button show say "New messages"
        await pageConditions.became(
          'Show "New messages"',
          () => pageElements.scrollToEndButton().textContent === 'New messages',
          1000
        );

        await pageObjects.scrollToBottom();

        // EXPECT: We are at the bottom, mark everything as read and hide the button.
        await pageConditions.scrollToEndButtonHidden();

        await pageObjects.scrollToTop();

        // Add a pause here to make sure the button is really hidden and not because of slow machine causing slow-show-up.
        await testHelpers.sleep(1000);

        // EXPECT: With "unread" behavior, we are at the top, everything is read, hide the button.
        await pageConditions.scrollToEndButtonHidden();

        render({ styleOptions: { scrollToEndButtonBehavior: 'any' } });

        // EXPECT: With "any" behavior, we are at the top, show the button.
        await pageConditions.scrollToEndButtonShown();

        // SETUP: With "false" behavior, the button should hide.
        render({ styleOptions: { scrollToEndButtonBehavior: false } });

        // EXPECT: The button is hidden.
        await pageConditions.scrollToEndButtonHidden();

        // SETUP: With "any" behavior, the button should show again.
        render({ styleOptions: { scrollToEndButtonBehavior: 'any' } });

        // EXPECT: The button is shown.
        await pageConditions.scrollToEndButtonShown();
      });
    </script>
  </body>
</html>
